<template>
  <el-card header="会员信息" class="form-section sidebar-card">
    <el-form-item label="客户属性" prop="customer_attribute">
      <el-radio-group v-model="formData.customer_attribute">
        <el-radio :label="1">普通客户</el-radio>
        <el-radio :label="2">合作客户</el-radio>
        <el-radio :label="3">会员客户</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-divider content-position="left">会员详情</el-divider>

    <el-form-item label="会员状态" prop="customer_status" v-if="!isView">
      <el-switch
        v-model="memberStatusEnabled"
        active-text="会员"
        inactive-text="非会员"
        @change="handleMemberStatusChange"
      />
    </el-form-item>
    <el-form-item label="会员状态" v-else>
      <span>
        {{ statusService.isValidMemberStatus(formData.value.customer_status) ? '会员' : '非会员' }}
      </span>
    </el-form-item>

    <template v-if="memberStatusEnabled">
      <el-form-item label="会员类型" prop="member_type">
        <el-select v-model="formData.member_type" placeholder="请选择会员类型" style="width: 100%">
          <el-option label="普惠版" :value="1" />
          <el-option label="标准版" :value="2" />
          <el-option label="VIP版" :value="3" />
        </el-select>
      </el-form-item>

      <el-form-item label="账号类型" prop="is_main_account">
        <el-radio-group v-model="formData.is_main_account">
          <el-radio :label="1">主账号</el-radio>
          <el-radio :label="0">子账号</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="服务开始" prop="member_start_time">
            <el-date-picker
              v-model="formData.member_start_time"
              type="date"
              placeholder="请选择服务开始时间"
              value-format="X"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务结束" prop="member_end_time">
            <el-date-picker
              v-model="formData.member_end_time"
              type="date"
              placeholder="请选择服务结束时间"
              value-format="X"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-alert
        v-if="formData.is_main_account === 0"
        title="子账号提示"
        type="info"
        description="请选择主账号客户，此客户将作为子账号挂靠"
        show-icon
        :closable="false"
        style="margin-bottom: 16px"
      />

      <el-form-item v-if="formData.is_main_account === 0" label="主账号" prop="main_account_id">
        <el-select
          v-model="formData.main_account_id"
          placeholder="请选择主账号客户"
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="item in mainAccountList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </template>
  </el-card>
</template>

<script setup lang="ts">
  import { ref, computed, watch, defineProps, defineEmits } from 'vue'
  import { statusService } from '@/utils/statusService'

  const props = defineProps({
    modelValue: {
      type: Object,
      default: () => ({}),
    },
    isView: {
      type: Boolean,
      default: false,
    },
  })

  const emit = defineEmits(['change', 'update:modelValue'])

  // 直接使用props.modelValue，避免尝试重新赋值整个对象
  const formData = computed(() => props.modelValue)

  // 会员状态开关
  const memberStatusEnabled = computed({
    get: () => statusService.isValidMemberStatus(formData.value.customer_status),
    set: val => {
      formData.value.customer_status = val
        ? statusService.getValidMemberStatusValue()
        : statusService.getNonMemberStatusValue()
      formData.value.customer_attribute = val ? 3 : formData.value.customer_attribute
      if (!val) {
        // 关闭会员时，清空会员相关字段
        formData.value.member_type = null
        formData.value.member_start_time = null
        formData.value.member_end_time = null
        formData.value.is_main_account = null
        formData.value.main_account_id = null
      }
      emit('update:modelValue', formData.value)
    },
  })

  // 模拟主账号列表
  const mainAccountList = ref([
    { id: 1, name: '客户A' },
    { id: 2, name: '客户B' },
  ])

  // 处理会员状态变化
  const handleMemberStatusChange = (enabled: boolean) => {
    emit('change', {
      field: 'customer_status',
      value: enabled
        ? statusService.getValidMemberStatusValue()
        : statusService.getNonMemberStatusValue(),
    })

    if (!enabled) {
      // 清空会员相关字段
      formData.value.member_type = null
      formData.value.member_start_time = null
      formData.value.member_end_time = null
    }
  }

  // 监听会员类型变化
  watch(
    () => formData.value.member_type,
    val => {
      emit('change', { field: 'member_type', value: val })
    }
  )
</script>
